<template>
  <div class="page-container">
    <div class="left-aside">
      <Menu></Menu>
    </div>
    <div class="right-aside">
      <div class="header">
        <Header></Header>
      </div>
      <div class="main">
        <PageNavigation class="page-navigation" />
        <div class="main-container">
          <div style="display: block; width: 100%">
            <router-view v-slot="{ Component, route }">
              <keep-alive :include="cachePage">
                <component
                  :is="Component"
                  :key="route.name"
                  v-if="route.meta.keepAlive"
                />
              </keep-alive>
              <component
                :is="Component"
                :key="route.name"
                v-if="!route.meta.keepAlive"
              />
            </router-view>
          </div>
        </div>
      </div>
      <!-- <div class="footer">
        <div class="footer-desc">这里是footer 不要的话注释掉</div>
      </div> -->
    </div>
  </div>
</template>

<script setup name="home">
import Menu from '../../components/Menu.vue'
import Header from '../../components/Header.vue'
import PageNavigation from '../../components/PageNavigation.vue'
import { useKeepAliveStore } from '../../store/index'
import { storeToRefs } from 'pinia'

const { cachePage } = storeToRefs(useKeepAliveStore())
</script>

<style scoped lang="less">
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0;
  padding: 0;

  .left-aside {
    display: flex;
    flex-grow: 0;
  }

  .right-aside {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    background-color: rgb(240, 242, 245);
    overflow-x: auto;

    .header {
      display: flex;
      width: 100%;
      height: 68px;
      align-self: flex-start;
      flex-grow: 0;
    }

    .main {
      width: 100%;
      flex-grow: 1;
      background-color: white;
      flex-direction: column;
      justify-content: space-between;
      overflow-y: auto;
      display: flex;
    }

    .page-navigation {
      display: flex;
      flex-grow: 0;
    }

    .main-container {
      display: flex;
      flex-grow: 1;
      height: 100%;
      width: 100%;
      overflow-y: auto;
      overflow-x: auto;
    }

    .footer {
      display: flex;
      width: 100%;
      height: 69px;
      background-color: white;
      border-top: 1px solid rgb(229, 230, 235);
      flex-grow: 0;
      justify-content: center;
      align-items: center;
      font-size: 23px;
      font-weight: bold;
      color: cadetblue;
    }
  }
}
</style>
